<#cenluan title="蹦跶一下" menu="tweet" validate="true" uploader="true">
	<ol class="breadcrumb">
		<li><a href="/tweet">蹦跶</a></li>
		<li class="active">蹦跶一下</li>
	</ol>
	<%if(!isEmpty(msg)){%>
		<div class="alert alert-danger">
			<button class="close" data-dismiss="alert">X</button>
			${msg}
		</div>
	<%}%>
	<div class="row">
		<div class="col-md-6">
			<form action="/tweet/save" method="post">
				${token}
				<div class="form-group">
					<label for="tweetContent">没事就多蹦跶两下</label>
					<textarea class="form-control" rows="5" id="tweetContent" style="resize:vertical;"
					placeholder="内容200字以内" required maxlength="200" minlength="1" name="content"></textarea>
				</div>
				<div class="form-group clearfix" id="photo-area">
					<span id="picker" class="hide"></span>
				</div>
				<div class="form-group row">
					<div class="col-md-5 mb20">
						<button class="btn btn-default btn-block" type="button" id="btn-photo">
							<span class="glyphicon glyphicon-picture"></span>&nbsp;添加图片
						</button>
					</div>
					<div class="col-md-5">
						<button class="btn btn-primary btn-block">
							<span class="glyphicon glyphicon-ok"></span>&nbsp;提交</button>
					</div>
				</div>
			</form>
		
		</div>
	
	</div>
	<script>
		$(function() {
			var UPLOADER = WebUploader.create({
				auto : true,
				swf : "/static/ext/WebUploader/Uploader.swf",
				server : "/tweet/photo/upload",
				pick : {
					id : "#picker",
					multiple : true
				},//接收的文件类型
				accept : {
					title : "Images",
					extensions : "gif,jpg,jpeg,bmp,png",
					mimeTypes : 'image/*'
				},
				compress : {
					width : 1000,
					height : 1000,
					quality : 90,
					allowMagnify : false,
					crop : false,
					preserveHeaders : true,
					noCompressIfLarger : true,
				},
				fileNumLimit : 10,
				fileSingleSizeLimit : 10 * 1024 * 1024,
				duplicate : true,
				sendAsBinary : true

			});
			//加入文件失败提示
			UPLOADER.on("error", function(type) {
				var msg = "加入文件失败";
				if (type == "F_EXCEED_SIZE") {
					msg = "文件过大，不能超过10M";
				} else if (type == "Q_EXCEED_NUM_LIMIT") {
					msg = "文件总数超出限制，最多只能同时添加10张图片";
				} else if (type == "Q_EXCEED_SIZE_LIMIT") {
					msg = "文件大小超出限制";
				} else if (type == "Q_TYPE_DENIED") {
					msg = "不支持的文件格式";
				}
				alert(msg);
			});
			//文件上传成功事件
			UPLOADER.on("uploadSuccess", function(file, response) {
				var ipt = $("<input type='hidden' name='photoId' value='"+response.id+"'>");
				$("form").prepend(ipt);
				var div = $("<div></div>");
				div.css("width", "100px").css("height", "100px").css("position", "relative").css("float", "left").css("margin-right", "20px");
				div.append("<img src='"+response.url+"' class='img-responsive'>");
				div.append("<button class='pk-close'>X</button>");
				div.find(".pk-close").click(function() {
					div.remove();
					ipt.remove();
					$.get("/tweet/photo/delete/" + response.id);
				});
				$("#photo-area").append(div);
			});

			UPLOADER.on("uploadError", function(file, reason) {
				if (!confirm("文件上传失败，是否重试")) {
					return;
				}
				UPLOADER.retry(file);
			});
			$("#btn-photo").click(function() {
				$(":file").trigger("click");
			});
			$("form").validate({
				submitHandler : function(form) {
					$("form").find("button").button("loading");
					form.submit();
				}
			});
		});
	</script>
</#cenluan>